<template>
  <div>
    <!-- 导航栏，注意：van-nav-bar 无 v-model="active" 用法，已删除错误绑定 -->
    <van-nav-bar title="商品搜索" left-arrow @click-left="$router.go(-1)" />
    <!-- 头部搜索 -->
    <van-search
  v-model="search"
  show-action
  placeholder="请输入搜索关键词"
  right-icon=""
  @search="onClickButton"
>
  <template #action>
    <div @click="onClickButton(search)">搜索</div>
  </template>
</van-search>

    <!-- 最近搜索 + 垃圾桶 区域 -->
    <div class="containner" v-if="searchList.length > 0">
      <span class="recent-title">最近搜索</span>
      <van-icon name="delete-o" class="delete-icon" @click="clear"/>
    </div>

    <!-- 搜索记录小方块区域 -->
    <div class="neirong">
      <div
        class="neirong_Item"
        v-for="(item, index) in searchList"
        :key="index" @click="onClickButton(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import { getHistoryList, setHistoryList } from '@/utils/storage'

export default {
  name: 'Search',
  data () {
    return {
      // 搜索记录数据，方便动态渲染
      searchList: getHistoryList(),
      // 输入框的内容
      search: ''
    }
  },
  methods: {
    onClickButton (key) {
      const index = this.searchList.indexOf(key)
      if (index !== -1) {
        this.searchList.splice(index, 1)
      }
      this.searchList.unshift(key)
      setHistoryList(this.searchList)
      this.$router.push({
        path: '/searchlist',
        query: {
          search: key // 将搜索关键词作为 query 参数
        }
      })
    },
    clear () {
      this.searchList = []
      setHistoryList([])
    }
  }
}
</script>

<style scoped>
/* 导航栏返回箭头颜色 */
::v-deep .van-nav-bar__arrow {
  color: black !important; /* !important 用于强制覆盖默认样式，若优先级够也可不用 */
}

/* 最近搜索 + 垃圾桶 布局 */
.containner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

/* 最近搜索文字样式，可按需调整 */
.recent-title {
  font-size: 14px;
  color: #333;
}

/* 垃圾桶图标样式，可按需调整大小、颜色等 */
.delete-icon {
  font-size: 16px;
  color: #999;
}

/* 搜索记录小方块布局 */
.neirong {
  display: flex;
  flex-wrap: wrap; /* 超出换行 */
  gap: 10px; /* 方块之间的间距，替代 margin 更简洁 */
  padding: 0 10px 10px; /* 左右下内边距，避免贴边 */
}

/* 小方块样式 */
.neirong_Item {
  background: #f5f5f5;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  /* 让方块大小均匀，可选：根据需求定宽 */
  min-width: 60px;
  text-align: center;
}

</style>
